html, body, div, span, a{
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
body{
	line-height:1;
	font-family: 'Microsoft YaHei', Helvetica, Arial, sans-serif;
}
img{
	display: block;
}
.n-wrap{
	position: relative;
	width: 2560px;
	height: 1024px;
	background: url(../images/n-bg.png) left top no-repeat;
	/*overflow: hidden;*/
}
.n-title{
	position: relative;
	width: 899px;
	height: 312px;
	margin: 0 auto;
	padding-top: 64px;
	background: url(../images/n-title.png) center no-repeat;
}
.prize-stage{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}
.mask{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: transparent;
	display: none;
}
.blur-mask{
	z-index: 98;
}
.stage-mask{
	z-index: 101;
}
.prize-mask{
	z-index: 99;
}
.prize-stage .prize-list{
	position: relative;
	width: 2560px;
	height: 1024px;
	overflow: visible;
	-webkit-perspective: 10000;
	-webkit-perspective-origin: 50% 50%;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}
.prize-stage .prize-list .li{
	position: absolute;
	top: 426px;
	cursor: pointer;
	width: 340px;
	height: 494px;
	transition: all 0.6s linear;
	-webkit-transition: all .6s linear;
	overflow: visible;
	z-index: 3;
}
.prize-stage .prize-list .li .front.spin{
	animation: front-spin 6s cubic-bezier(0,.61,0,1) 0.4s;
	-webkit-animation: front-spin 6s cubic-bezier(0,.61,0,1) 0.4s;
}
.prize-stage .prize-list .li .back.spin{
	animation: back-spin 6s cubic-bezier(0,.61,0,1) 0.4s;
	-webkit-animation: back-spin 6s cubic-bezier(0,.61,0,1) 0.4s;
}
.prize-stage .prize-list .li .front-wrap{
	position: absolute;
	left: 0;
	top: 0;
	width: 340px;
	height: 438px;
	overflow: visible;
	z-index: 3;
}
.prize-stage .prize-list .li .front-wrap img{
	display: block;
}
.prize-stage .prize-list .li .up{
	position: absolute;
	left: 0;
	top: 0;
	width: 340px;
	height: 219px;
	opacity: 1;
	z-index: 3;
}
.prize-stage .prize-list .li .down{
	position: absolute;
	left: 0;
	top: 219px;
	width: 340px;
	height: 219px;
	z-index: 3;
	opacity: 1;
}

/* 暂时不用
@keyframes up{
	0%{
		top: 0px;
		opacity: 1;
	}
	90%{
		top: -200px;
		opacity: 0.5;
	}
	100%{
		top: -200px;
		opacity: 0;
	}
}
@-webkit-keyframes up{
	0%{
		top: 0px;
		opacity: 1;
	}
	90%{
		top: -200px;
		opacity: 0.5;
	}
	100%{
		top: -200px;
		opacity: 0;
	}
}
@keyframes down{
	0%{
		top: 219px;
		opacity: 1;
	}
	90%{
		top: 419px;
		opacity: 0.5;
	}
	100%{
		top: 419px;
		opacity: 0;
	}
}
@-webkit-keyframes down{
	0%{
		top: 219px;
		opacity: 1;
	}
	90%{
		top: 419px;
		opacity: 0.5;
	}
	100%{
		top: 419px;
		opacity: 0;
	}
} */
@keyframes front-spin{
	0%{
		transform: rotateY(0deg);
		-webkit-transform: rotateY(0deg);
	}
	100%{
		transform: rotateY(5760deg);
		-webkit-transform: rotateY(5760deg);
	}
}
@-webkit-keyframes front-spin{
	0%{
		transform: rotateY(0deg);
		-webkit-transform: rotateY(0deg);
	}
	100%{
		transform: rotateY(5760deg);
		-webkit-transform: rotateY(5760deg);
	}
}
@keyframes back-spin{
	0%{
		transform: rotateY(180deg);
		-webkit-transform: rotateY(180deg);
	}
	100%{
		transform: rotateY(5940deg);
		-webkit-transform: rotateY(5940deg);
	}
}
@-webkit-keyframes back-spin{
	0%{
		transform: rotateY(180deg);
		-webkit-transform: rotateY(180deg);
	}
	100%{
		transform: rotateY(5940deg);
		-webkit-transform: rotateY(5940deg);
	}
}
.prize-stage .prize-list .li .front{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
 	transition: transform 0.6s ease-in-out;
	-webkit-transition: transform .6s ease-in-out;
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	backface-visibility: hidden;
	z-index: 2;
}
.prize-stage .prize-list .li .front.blur{
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-ms-filter: blur(3px);    
	filter: blur(3px); 
}
.prize-stage .prize-list .li .back{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transition: transform 0.6s ease-in-out;
	-webkit-transition: transform .6s ease-in-out;
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	backface-visibility: hidden;
	z-index: 1;
}
.prize-stage .prize-list .li .luck-btn{
	position: absolute;
	left: 50%;
	margin-left: -120px;
	top: 50%;
	margin-top: -53px;
	width: 240px;
	height: 106px;
	background: url(../images/luck-btn-def.png) left top no-repeat;
	cursor: pointer;
	opacity: 0;
	display: none;
	z-index: 101;
	transition: opacity 0.6s;
	-webkit-transition: opacity 0.6s;
}
/*设置宽高可以正好包裹住front-f 计算出来R=406*/ 
/*406太大，超过了body height R=400*/
.prize-stage .prize-list .li .front-f-wrap{
	position: absolute;
	top: 334px;  /*668/2-400+400*/
	left: 230px; /*460/2-400+400*/
	width: 800px;
	height: 800px;
	margin: -400px; /*为了保证以中心点缩放*/
	border-radius: 50%;
	background-color: transparent;
	display: none;
	overflow: hidden; /*先设置成visible,之后要消失的时候在设置成hidden*/
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	backface-visibility: hidden;
	z-index: 999;
	transition: all 1s linear;
	-webkit-transition: all 1s linear;
}
.prize-stage .prize-list .li .front-f-wrap.hide{
/* 	width: 0;
height: 0;
margin: 0; */
	transform: scale(0.01) rotateY(0deg);
	-webkit-transform: scale(0.01) rotateY(0deg);
}
.prize-stage .prize-list .li .front-f.hide{
/* 	width: 0;
height: 0;
margin: 0; */
	transform: scale(0.01) rotateY(0deg);
	-webkit-transform: scale(0.01) rotateY(0deg);
}
.prize-stage .prize-list .li .front-f{
	position: absolute;
	display: none;
	/*170+230*/
	/*left: 400px;*/
	/*66+334*/
	/*top: 400px;*/
	/*margin: -334px -230px;*/
	width: 460px;
	height: 668px;
	/* left: 170px;
	top: 66px; */
	left: 0;
	top: 0;
	opacity: 0;
	background: url(../images/prize-back-lg.png) left top no-repeat;
	overflow: hidden;
	cursor: default;
	backface-visibility: hidden;
	z-index: 999;
	transition: transform 1s linear;
	-webkit-transition: -webkit-transform 1s linear;
}
.prize-stage .prize-list .li .front-f.spin{
	animation: front-spin 6s cubic-bezier(0,.61,0,1) 0.4s;
	-webkit-animation: front-spin 6s cubic-bezier(0,.61,0,1) 0.4s;
}
.prize-stage .prize-list .li .front-f .avatar{
	/*margin: 90px auto 30px;*/ /*缩放下不能使用*/
	position: absolute;
	top: 90px;
	left: 83.5px;
	width: 293px;
	height: 293px;
	overflow: hidden;
	border-radius: 3px;
	box-shadow: 0 0 0 5px rgba(255,255,255,.5);
}
.prize-stage .prize-list .li .front-f .avatar img{
	width: 293px;
	height: auto;
}
.prize-stage .prize-list .li .front-f .name{
	/*margin-bottom: 16px;*/
	position: absolute;
	top: 413px;
	left: 0;
	width: 100%;
	font-size: 56px;
	line-height: 60px;
	color: #c72825;
	text-align: center;
	letter-spacing: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-shadow: #f9e53d 0px 2px,  
             	 #f9e53d 2px 0px,  
             	 #f9e53d -2px 0px,  
             	 #f9e53d 0px -2px,  
             	 #f9e53d -1.4px -1.4px,  
             	 #f9e53d 1.4px 1.4px,  
             	 #f9e53d 1.4px -1.4px,  
             	 #f9e53d -1.4px 1.4px;
}
.prize-stage .prize-list .li .front-f .c-department{
	position: absolute;
	top: 489px;
	left: 0;
	width: 100%;
	font-size: 32px;
	line-height: 40px;
	color: #f9e53d;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-shadow: #5d3102 0px 2px,  
             	 #5d3102 2px 0px,  
             	 #5d3102 -2px 0px,  
             	 #5d3102 0px -2px,  
             	 #5d3102 -1.4px -1.4px,  
             	 #5d3102 1.4px 1.4px,  
             	 #5d3102 1.4px -1.4px,  
             	 #5d3102 -1.4px 1.4px;
}
.p1{
	left: 270px;
}
.p2{
	left: 690px;
}
.p3{
	left: 1110px;
}
.p4{
	left: 1530px;
}
.p5{
	left: 1950px;
}
.p1 .front{
	background: url(../images/prize-3-lg.png) left top no-repeat;
	background-size: 100%;
}
.p1 .back{
	background: url(../images/prize-back-lg.png) left top no-repeat;
	background-size: 100%;
}
.p2 .front{
	background: url(../images/prize-3-lg.png) left top no-repeat;
	background-size: 100%;
}
.p2 .back{
	background: url(../images/prize-back-lg.png) left top no-repeat;
	background-size: 100%;
}
.p3 .front{
	background: url(../images/prize-3-lg.png) left top no-repeat;
	background-size: 100%;
}
.p3 .back{
	background: url(../images/prize-back-lg.png) left top no-repeat;
	background-size: 100%;
}
.p4 .front{
	background: url(../images/prize-3-lg.png) left top no-repeat;
	background-size: 100%;
}
.p4 .back{
	background: url(../images/prize-back-lg.png) left top no-repeat;
	background-size: 100%;
}
.p5 .front{
	background: url(../images/prize-3-lg.png) left top no-repeat;
	background-size: 100%;
}
.p5 .back{
	background: url(../images/prize-back-lg.png) left top no-repeat;
	background-size: 100%;
}